<template>
	<view class="balance_recharge_warp">
		<Header leftPathType="switchTab" leftPath="/pages/card/card" :title="$t('common.recharge')"/>
		<view class="balance_recharge_content">
			<view class="mine_balance_warp">
				<view class="_balance_header">
					<view class="_balance_header_amount">
						<view>{{$t('common.my.balance')}}</view>
						<view style="margin: 10rpx 0 0 20rpx;">
							<up-image v-if="balanceShow" src="/static/comm/xs.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="balanceShow=false;"></up-image>
							<up-image v-else src="/static/comm/yc.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="balanceShow=true;"></up-image>
						</view>
					</view>
					<view class="_balance_header_but" @click="jumpRecharge">{{$t('common.recharge')}}</view>
				</view>
				<view class="_balance_amount" v-if="balanceShow">
					<view>$</view>
					<view style="font-size: 72rpx;margin-left: 10rpx;">{{balanceData}}</view>
				</view>
				<view class="_balance_amount" v-else>*******</view>
			</view>
			<view class="form_warp">
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t("recharge.card")}}</view>
					<view class="content_select_card_comm">
						<view class="select_card_left">
							<up-image :src="selectCard.cardImg" width="90" height="50" bgColor="#f1f6ff00" radius="6"></up-image>
							<view class="select_card_left_info">
								<view class="select_card_left_title">{{selectCard.name}}</view>
								<view class="select_card_left_value">{{selectCard.cardNo}}</view>
							</view>
						</view>
						<view></view>
					</view>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t("recharge.quota")}}</view>
					<up-input
						:placeholder="$t('recharge.quota.placeholder')"
						border="surround"
						v-model="form.amount"
						:customStyle="inputCss"
					  >
					  </up-input>
				</view>
			</view>
			<view class="but_comm_warp" @click="balanceOk">
				{{$t("recharge.confirm.recharge")}}
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getAcctBalance } from '@/api/finance.js';
	import { rechargeCard,getMyCardsDetail } from '@/api/card.js';
	// import CardComm from '@/components/card_comm.vue';
	
	export default {
		components:{Header},
		data() {
			return {
				balanceShow:true,
				balanceData:0,// 我的余额
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				form:{
					id:0,
					amount:null,
				},
				selectCard:{},// 选择的卡片
			};
		},
		onLoad(option) {
			const id = option.id;
			if(id && id !==0){
				this.form.id = id;
				this.getCategoryDetailFun();
			}
		},
		mounted() {
			this.getAcctBalanceFun();
		},
		methods: {
			async getCategoryDetailFun(){
				const params = {
					id:this.form.id,
				}
				const resp = await getMyCardsDetail(params);
				console.log("respresprespresp",resp);
				if(resp && resp.bizcode === 100){
					this.selectCard = resp.data;
				}
			},
			// getSelectCard(item){
			// 	this.selectCard = item;
			// 	this.form.id = item.id;
			// },
			/**
			 * 查询充值余额
			 */
			async getAcctBalanceFun(){
				const resp = await getAcctBalance();
				if(resp && resp.bizcode === 100){
					this.balanceData = resp.data;
				}
			},
			jumpRecharge(){
				uni.navigateTo({
					url:"/pages/recharge/recharge",
				})
			},
			/**
			 * 确认充值
			 */
			async balanceOk(){
				const form = this.form;
				const selectCard = this.selectCard;
				if(!selectCard.isActivated){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("recharge.card.not.activated"),
					});
					return false;
				}
				if(!form.id){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("recharge.card.cardholder"),
					});
					return false;
				}
				if(!form.amount){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("common.recharge.placeholder"),
					});
					return false;
				}
				const resp = await rechargeCard(form);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t("recharge.ok"),
					});
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/card/card",
						})
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss">
.balance_recharge_warp{
	height: calc(100vh - 0rpx);
	.balance_recharge_content{
		padding: 30rpx;
		.form_warp{
			margin-top: 40rpx;
		}
	}
	.but_comm_warp{
		margin-top: 200rpx;
	}
}
</style>
